<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
		<script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<style>
			/*文件夹图标*/
			
			@font-face {
				font-family: 'iconfont';
				/* project id 1571015 */
				src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot');
				src: url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff2') format('woff2'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.woff') format('woff'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.ttf') format('truetype'), url('//at.alicdn.com/t/font_1571015_wp63s5c36xe.svg#iconfont') format('svg');
			}
			
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			
			.right {
				float: right;
				margin-right: 20px;
				display: none;
			}
			
			#button-list {
				z-index: 999;
				background-color: rgba(255, 255, 255, 0);
				width: 354px;
				position: fixed;
				bottom: 5px;
				display: none;
			}
			
			.black_overlay {
				display: none;
				position: absolute;
				top: -10%;
				left: -10%;
				width: 440px;
				height: 873px;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=80);
			}
			
			#press {
				display: none;
				position: absolute;
				top: 200px;
				left: 7%;
				width: 337px;
				height: 188px;
				padding: 10px;
				border: 1px solid #ccc;
				background-color: white;
				z-index: 1002;
				border-radius: 2%;
				font-size: 16px;
			}
			
			#note {
				display: none;
				position: absolute;
				top: 200px;
				left: 7%;
				width: 337px;
				height: 113px;
				padding: 10px;
				border: 1px solid #ccc;
				background-color: white;
				z-index: 1002;
				border-radius: 2%;
				font-size: 16px;
			}
			
			.li_list {
				margin-bottom: 15px;
			}
			
			#popup-li {
				margin-right: 20px;
			}
			
			.test-id {
				display: none;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1);"><span class="mui-icon mui-pull-left mui-icon-back" id="history-page" style="color: #000"></span>
				<h1 class="mui-title">文件夹</h1>
				<a class="mui-icon mui-icon-more-filled" href="#threedian" style="color: #000;float: right;" id="menu_folder"></a>
		</header>
		<div class="mui-input-row mui-search">

			<input type="search" class="mui-input-clear" placeholder="搜索">
		</div>

		<!--当前页面的pid-->
		<div class="new-page-pid" style="display: none;"></div>
		<div id="folder_all">
			<!--一个文件夹-->
			<div class="folder-list folder_name" v-for="list in listes">
				<label class="inp-label">
					<span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>
					<span class="title-weight">{{list.menuname}}</span>
					<span class="test-id">{{list.id}}</span>
					<p class="title">{{list.createTime}}</p>
				</label>
			</div>
			<!--一个笔记-->
			<div class="note-list note_name" onclick="turnPage()" v-for="note in notes">
				<label class="inp-label">
					<span class="title-weight">{{note.notesName}}</span>
					<span class="test-id">{{note.id}}</span>
					<p class="title">摘要</p>
					<p class="title">{{note.createTime}}</p>
				</label>
			</div>
		</div>

		<!--文件夹右上角菜单-->
		<div id="threedian" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="batch-click">
					<a href="folder_page_compile.html">批量编辑</a>
				</li>
				<li class="mui-table-view-cell" id='promptBtn'>新建文件夹
				</li>
				<li class="mui-table-view-cell check-radio">按修改时间
					<svg t="1576747105360" style="display: block;" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按创建时间
					<svg t="1576747105360" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
				<li class="mui-table-view-cell check-radio">按名称排序
					<svg t="1576747105360" class="icon right" viewBox="0 0 1433 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" width="16" height="16">
						<path d="M42.530133 606.8224C16.315733 579.584 13.380267 532.753067 35.498667 502.647467L33.5872 505.173333a66.696533 66.696533 0 0 1 94.549333-13.5168l226.645334 173.6704c59.869867 45.8752 154.965333 44.373333 213.128533-4.096L1323.690667 31.402667a76.5952 76.5952 0 0 1 101.034666 4.5056L1406.429867 17.749333a67.037867 67.037867 0 0 1 0.136533 95.8464l-846.506667 833.1264a134.621867 134.621867 0 0 1-191.624533-2.730666L42.530133 606.890667z" p-id="2858" fill="#1296db"></path>
					</svg>
				</li>
			</ul>
		</div>
		<div id="press">
			<ul>
				<li class="li_list" id="" onclick=""><i class="fa fa-expeditedssl" id="popup-li" aria-hidden="true"></i>开启阅读密码<i class="fixed-id" style="display: none;"></i></li>
				<li class="li_list" id="renameid"><i class="fa fa-pencil-square-o" id="popup-li" aria-hidden="true"></i>重命名<i class="fixed-id" style="display: none;"></i></li>
				<li class="li_list"><i class="fa fa-share-alt" aria-hidden="true"></i>
					<a href="#" style="margin-left: 20px;">分享<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list" id="move-to"><i class="fa fa-folder-o" aria-hidden="true"></i>
					<a href="folder_page_move.html" style="margin-left: 20px;">移动<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list" id="delete" onclick=""><i class="fa fa-trash-o" id="popup-li" aria-hidden="true"></i>删除<i class="fixed-id" style="display: none;"></i></li>
			</ul>
		</div>
		<div id="note">
			<ul>
				<li class="li_list"><i class="fa fa-share-alt" aria-hidden="true"></i>
					<a href="#" style="margin-left: 20px;">分享<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list"><i class="fa fa-folder-o" aria-hidden="true"></i>
					<a href="folder_page_move.html" style="margin-left: 20px;">移动<i class="fixed-id" style="display: none;"></i></a>
				</li>
				<li class="li_list" id="delete" onclick=""><i class="fa fa-trash-o" id="popup-li" aria-hidden="true"></i>删除<i class="fixed-id" style="display: none;"></i></li>
			</ul>
		</div>
		<div class="black_overlay" id="fade"></div>
		<script type="text/javascript">
			//点击排序方式
			$(".check-radio").click(function() {
				$(".right").hide();
				$(this).find("svg").show();
			})
			mui.plusReady(function() {
				var token=plus.storage.getItem("accessToken");

				/*mui.ajax('http://343bdb1.cpolar.io/note-folder/classification/getallfolder?token=' + token, {
					data: {
						id: faId
					},
					dataType: 'json', //服务器返回json格式数据
					crossDomain: true,
					type: 'get', //HTTP请求类型
					success: function(data) {
						for(var i = 0; i < data.length; i++) {
							html += '<div class="folder-list folder_name"><label class="inp-label"><span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>' +
								+'<span class="title-weight">' + data[i].menuname + '</span><span class="test-id">' + data[i].id + '</span><p class="title">' + data[i].createTime + '</p></label></div>'
						}
						document.getElementById('folder_all').innerHTML = html;
					}
				});
				mui.ajax('http://343bdb1.cpolar.io/note-notes/notes/getallnotes?token=' + token, {
					data: {
						id: faId
					},
					dataType: 'json', //服务器返回json格式数据
					crossDomain: true,
					type: 'get', //HTTP请求类型
					success: function(data) {
						for(var i = 0; i < data.length; i++) {
							html += '<div class="note-list note_name"><label class="inp-label"><span class="title-weight">' + data[i].notesName + '</span>' +
								+'<span class="test-id">' + data[i].id + '</span><p class="title">摘要</p><p class="title">' + data[i].createTime + '</p></label></div>'
						}
						document.getElementById('folder_all').innerHTML = html;
					}
				});*/
				new Vue({
					el: '#folder_all',
					data() {
						return {
							listes: null,
							notes: null
						}
					},
					mounted() {
						axios
							.get('http://343bdb1.cpolar.io/note-folder/classification/getallfolder?token=' + token)
							.then(response => (this.listes = response.data))
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});
						axios
							.get('http://343bdb1.cpolar.io/note-notes/notes/getallnotes?token=' + token)
							.then(response => (this.notes = response.data))
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});
					},
				})
			})
			$(function() {
				//长按文件夹
				var timeOutEvent = 0;
				var startTime = "";
				var endTime = "";
				//手指触摸屏幕时触发事件
				$('body').on('touchstart', '.folder_name', function() {
					startTime = new Date();
					var faId = $(this).find(".test-id")[0].innerText;
					timeOutEvent = setTimeout(function() {
						timeOutEvent = 0;
						$("#fade").show();
						$('#press').show();
						for(var i = 0; i < 5; i++) {
							$('#press').find('.fixed-id')[i].innerHTML = faId;
						}
					}, 700);
				});
				//手指在屏幕上移动时触发
				$('body').on('touchmove', '.folder_name', function(e) {
					e.preventDefault();
					clearTimeout(timeOutEvent);
					timeOutEvent = 0;
				});
				//手指离开屏幕时触发
				$('body').on('touchend', '.folder_name', function(data) {
					endTime = new Date();
					clearTimeout(timeOutEvent);
					if(endTime - startTime < 700) {
						var faId = $(this).find(".test-id")[0].innerText;
						$('#folder_all').empty();
						var html = "";
						$('.new-page-pid').html(faId);
						mui.ajax('http://343bdb1.cpolar.io/note-folder/classification/getallfolder?token=' + token, {
							data: {
								id: faId
							},
							dataType: 'json', //服务器返回json格式数据
							crossDomain: true,
							type: 'get', //HTTP请求类型
							success: function(data) {
								for(var i = 0; i < data.length; i++) {
									html += '<div class="folder-list folder_name" v-for="list in listes"><label class="inp-label"><span class="iconfont" style="color: #F3E07F;">&#xe66d;</span>' +
										+'<span class="title-weight">' + data[i].menuname + '</span><span class="test-id">' + data[i].id + '</span><p class="title">' + data[i].createTime + '</p></label></div>'
								}
								document.getElementById('folder_all').innerHTML = html;
							}
						});
						mui.ajax('http://343bdb1.cpolar.io/note-notes/notes/getallnotes?token=' + token, {
							data: {
								id: faId
							},
							dataType: 'json', //服务器返回json格式数据
							crossDomain: true,
							type: 'get', //HTTP请求类型
							success: function(data) {
								for(var i = 0; i < data.length; i++) {
									html += '<div class="note-list note_name" onclick="turnPage()" v-for="note in notes"><label class="inp-label"><span class="title-weight">' + data[i].notesName + '</span>' +
										+'<span class="test-id">' + data[i].id + '</span><p class="title">摘要</p><p class="title">' + data[i].createTime + '</p></label></div>'
								}
								document.getElementById('folder_all').innerHTML = html;
							}
						});
					}
					return false;
				});

				//长按笔记
				//手指触摸屏幕时触发事件
				$('body').on('touchstart', '.note-list', function() {
					startTime = new Date();
					var faId = $(this).find(".test-id")[0].innerText;
					timeOutEvent = setTimeout(function() {
						timeOutEvent = 0;
						$('#note').find('.fixed-id').innerHTML = faId;
						$("#fade").show();
						$('#note').show();
					}, 700);
				});
				/*//手指在屏幕上移动时触发
				$('body').on('touchmove', '.note-list', function(e) {
					e.preventDefault();
					clearTimeout(timeOutEvent);
					timeOutEvent = 0;
				});*/
				//手指离开屏幕时触发
				/*$('body').on('touchend', '.note-list', function(data) {
					endTime = new Date();
					clearTimeout(timeOutEvent);
					if(endTime - startTime < 700) {
						alert("小于700毫秒则是点击");
						console.log(data);
					}
					return false;

				});*/
				

				});




			})
			//关闭文件夹弹出层
			$('#fade').click(function() {
				$("#fade").hide();
				$('#press').hide();
			})
			//长按笔记弹出层
			function longnote() {

			}
			//关闭笔记弹出层
			$('#fade').click(function() {
				$("#fade").hide();
				$('#note').hide();
			})

			//添加文件夹
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			document.getElementById("promptBtn").addEventListener('tap', function(e) {
				//隐藏弹出框
				mui("#threedian").popover('toggle');
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('', '请输入名称:', '新建文件夹', btnArray, function(e) {
					if(e.index == 1) {
						var faId = $('.new-page-pid').text();
						$.ajax({
							url: 'http://343bdb1.cpolar.io/note-folder/classification/createfolder?token=' + token,
							/* headers: {
							   token: sessionStorage.getItem("accessToken")
							 },*/
							data: {
								id: faId,
								folderName: e.value
							},
							type: "POST", //请求方式
							dataType: "json",
							success: function(d) {
								mui.toast('添加成功');
							},
							error: function() {
								//异常处理；
								mui.toast('添加失败');
							}
						})
					} else {

					}
				})
			});

			//修改文件夹名
			document.getElementById("renameid").addEventListener('tap', function(e) {
				//隐藏弹出框
				$("#fade").hide();
				$('#press').hide();
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				mui.prompt('', '默认传值', '重命名', btnArray, function(e) {
					if(e.index == 1) {
						var faId = $("#press").find('.fixed-id')[1].innerHTML;
						$.ajax({
							url: 'http://343bdb1.cpolar.io/note-folder/classification/renameFolder?token=' + token,
							/* headers: {
							   token: sessionStorage.getItem("accessToken")
							 },*/
							data: {
								folderId: faId,
								folderName: e.value
							},
							type: "POST", //请求方式
							dataType: "json",
							success: function(d) {
								mui.toast('修改成功');
							},
							error: function() {
								//异常处理；
								mui.toast('添加失败');
							}
						})

					} else {

					}
				})
			});

			//删除文件夹或笔记
			//删除按钮
			document.getElementById("delete").addEventListener('tap', function() {
				$("#fade").hide();
				$('#press').hide();
				var btnArray = ['取消', '确定'];
				mui.confirm('删除后无法恢复', '确认删除?', btnArray, function(e) {
					if(e.index == 1) {
						var faId = $("#press").find('.fixed-id')[4].innerHTML;
						$.ajax({
							url: 'http://343bdb1.cpolar.io/note-folder/classification/deleteFolder?token=' + token,
							/* headers: {
							   token: sessionStorage.getItem("accessToken")
							 },*/
							data: {
								folderId: faId
							},
							type: "POST", //请求方式
							dataType: "json",
							success: function(d) {
								mui.toast('修改成功');
							},
							error: function() {
								//异常处理；
								mui.toast('添加失败');
							}
						})
						mui.toast('删除成功');
					}
				})
			});

			mui.back = function() {
				plus.webview.currentWebview().close();
			}
			//向移动页面pid传值
			document.getElementById("move-to").addEventListener("click", function() {
				mui.openWindow({
					url: "folder_page_move.html",
					id: $("#press").find('.fixed-id')[4].innerHTML,
					show: {
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					},
					extras: {
						pid: "11"
					}
				});
			});
		</script>
	</body>

</html>
